<!-- 执行日志 物业-公区 -->
<template>
	<div class="zs-table-page-container">
		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column prop="deviceNum" label="表号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="readNum" label="示数" show-overflow-tooltip align="right" :formatter="defaultTableData" />
				<el-table-column prop="formatGxsj" label="更新时间" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column label="是否整点" show-overflow-tooltip align="center" :formatter="defaultTableData">
					<template #default="{ row }">
						<span>{{ row.isNotNum == 1 ? '是' : '否' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="formatExecuteTime" label="对应整点" show-overflow-tooltip align="center" :formatter="defaultTableData" />
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { defaultTableData, parseTime } from '@/utils/publicUtils';
	import Energy from '@/api/Energy';
	import { ref, reactive } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	const route = useRoute();
	
	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);
	let searchObj = reactive({ pageNumber: 1, pageSize: curPageSize.value, id: route.query.id });

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	// //列表数据源
	const queryList = async () => {
		tableData.loading = true;
		let res = await Energy.doLogInfoApi(searchObj);
		if (res.data.code !== 200) return;
		initData(res.data.data.list);
		tableData.data = res.data.data.list;
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.formatExecuteTime = item.executeTime ? parseTime(item.executeTime) : '-';
			item.formatGxsj = item.gxsj ? parseTime(item.gxsj) : '-';
		});
	};
	
	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			searchObj.pageSize = size;
		} else {
			searchObj.pageNumber = size;
		}
		queryList();
	};

	queryList();
</script>
